<!--
 * @Description: 
 * @Author: 阳婷
 * @Date: 2021-03-19 11:15:53
 * @LastEditTime: 2023-10-23 14:30:48
 * @LastEditors: 阳婷
-->
<template>
    <div class="sideBox">
        <div class="sideBoxInfo">
            <el-form ref="forms" :rules="rules" :model="form" label-width="140px">
                <el-form-item label="货柜编号" prop="shelf_code">
                    <el-input v-model="form.shelf_code" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="货柜状态" prop="status">
                    <el-select class="input-full" v-model="form.status" placeholder="货柜状态">
                        <el-option v-for="item in shelfStatus" :key="item.key" :label="item.name" :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="货柜点位" prop="location_name">
                    <el-select class="input-full" v-model="form.location_name" clearable placeholder="货柜点位">
                        <el-option v-for="item in locations" :key="item.location_name" :label="item.location_name"
                            :value="item.location_name">
                        </el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="货柜层高">
                    <el-input class="inputHeight" type="number" v-model="form.shelfHeight" clearable placeholder=""></el-input> cm
                </el-form-item>
                 <el-form-item label="底座高度">
                    <el-input class="inputHeight" type="number" v-model="form.baseHeight" clearable placeholder=""></el-input> cm
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="footerBtn">
            <el-button @click="onSubmit" type="primary" size="small">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {
        ref,
        reactive,
        toRefs,
        defineComponent,
        onMounted,
        watch,
        getCurrentInstance
    } from "vue";
    import {
        deepCopy,
        isEmptyObject
    } from "@/utils/index"
    import {
        newUpload
    } from "@/utils/ajax"
    export default defineComponent({
        props: ["rowData", "locations", "mapName"],
        setup(props) {
            const datas = reactive({
                rules: {
                    shelf_code: [{
                        required: true,
                        message: "请输入货柜编号",
                        trigger: "blur"
                    }],
                    status: [{
                        required: true,
                        message: "请选择货柜状态",
                        trigger: "change"
                    }],
                },
                shelfStatus: [{
                    key: 1,
                    name: "启用"
                }, {
                    key: 0,
                    name: "禁用"
                }],
                form: {
                    id: '',
                    shelf_code: '',
                    status: 1,
                    location_name: "",
                    mapName: "",
                    remark: '',
                    baseHeight:"",
                    shelfHeight:""
                },
                // locations:[]
            })
            const { proxy } = getCurrentInstance();
            const forms = ref(null)
            onMounted(() => {
                clearData();
                //  getLocation()
                if (!isEmptyObject(props.rowData)) {
                    datas.form = deepCopy(props.rowData)
                }
            });
            watch(() => props.rowData, (newRow, oldRow) => {
                clearData();
                //  getLocation()
                if (!isEmptyObject(newRow)) {
                    datas.form = deepCopy(newRow);
                }
            });
            // const getLocation=()=>{
            //      proxy.$ajax("get", "/api/robot/getLocations", {}, data => {
            //         if (data.code == 200) {
            //             datas.locations=data.data
            //         }else{
            //             proxy.$message({
            //             type: "success",
            //             message: data.msg
            //         })
            //         }

            //     })
            // }
            const onSubmit = () => {
                if (datas.form.shelf_code !== "") {

                    if (datas.form.id != "") {
                        update()
                    } else {
                        add()
                    }
                } else {
                    proxy.$message({
                        type: "warning",
                        message: "货柜编号必须填写"
                    })
                }
            };
            const add = () => {
                datas.form.mapName = props.mapName
                proxy.$ajax("post", "/api/shelfs", datas.form, data => {
                    if (data.code == 200) {
                        clearData();
                        proxy.$parent.$parent.$parent.show = false
                        proxy.$parent.$parent.$parent.getData()
                    }
                    proxy.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            };
            const update = () => {
                if (!datas.form.mapName) {
                    datas.form.mapName = props.mapName
                }
                proxy.$ajax("put", "/api/shelfs/" + datas.form.id, datas.form, data => {
                    if (data.code == 200) {
                        clearData()
                        proxy.$parent.$parent.$parent.show = false
                        proxy.$parent.$parent.$parent.getData()
                    }
                    proxy.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            };
            const clearData = () => {
                datas.form = {
                    id: '',
                    shelf_code: '',
                    status: 1,
                    location_name: "",
                    remark: '',
                    baseHeight:"",
                    shelfHeight:""
                }
            }
            return { ...toRefs(datas), onSubmit, forms }
        }
    })
</script>
<style scoped>
    .tabPane {
        padding: 5px 15px 15px 15px;
    }

    .productImg {
        width: 200px;
        height: 200px;
    }
    .inputHeight{
        width: 100px;
    }
</style>